{extend name="base" /}
{block name="title"}群成员查询{/block}
{block name="head"}
<style>
.weui_panel_hd{padding:0;}
.weui_cell{padding:0;}
.weui_cell_bd{padding-left:15px;}
.weui_cells{margin-top:0}
.qun .weui_media_box { padding: 2px 5px;}
.qun .weui_media_appmsg .weui_media_desc { -webkit-line-clamp: 1;}
.qun .weui_media_appmsg .weui_media_hd { width: 48px; height: 48px; line-height: 48px;}
.qun .weui_media_bd{text-align:left;}
.qun .weui_mask{z-index:8;}
.qun .weui-dialog-visible{z-index:9;}
</style>
{/block}
{block name="body"}
<div class="weui_panel ms-controller qun" ms-controller="QunMem">

  <div class="weui_panel_hd">
    <div class="weui-flex weui_cells_title">
      <div class="weui-flex-item">当前群号: {{@Code}}</div>
      <div class="weui-flex-item">房卡数量: {{@RoomCard}}</div>
    </div>
    <div class="weui_cells weui_cells_form">
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary"><input class="weui_input" type="text" placeholder="输入GameID、昵称过滤" ms-duplex="@search2" /></div>
        <div class="weui_cell_ft"><i class="weui_icon_warn"></i><a class="weui-vcode-btn" ms-on-tap="@tapQuery">查询</a></div>
      </div>
    </div>
  </div>

  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead>
        <tr>
          <th ms-on-tap="@tapHead(0)">成员</th>
          <th ms-on-tap="@tapHead(1)">当前<br/>房费</th>
          <th ms-on-tap="@tapHead(2)">今日<br/>消耗</th>
          <th ms-on-tap="@tapHead(3)">累计<br/>消耗</th>
          <th ms-on-tap="@tapHead(4)">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="5">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>
            <div class="weui_media_box weui_media_appmsg">
              <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" ms-attr="{src:v.Avatar?v.Avatar:'__STATIC__/agent/dface.png', alt:v.GameID}" />              </div>
              <div class="weui_media_bd">
                <h4 class="weui_media_title">{{v.NickName|truncate(8)}}</h4>
                <p class="weui_media_desc">{{v.GameID}}</p>
              </div>
            </div>
          </td>
          <td>{{v.Gold}}</td>
          <td>{{v.TodayCost}}</td>
          <td>{{v.TotalCost}}</td>
          <td><a class="weui_btn weui_btn_mini weui_btn_primary" ms-on-tap="@DialogShow(v.GameID)">赠房费</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>

  <div ms-class="['weui_mask', @bShowDialog&&'weui_mask_visible']"></div>
  <div ms-class="['weui-custom-pop', @bShowDialog&&'weui-dialog-visible']">
    <div class="close" ms-on-tap="@DialogHide"><i class="icon icon-95 f25"></i></div>
    <div class="weui-custom-hd">赠送房费给[{{@dNickName}}]</div>
    <div class="weui-custom-bd"><input class="weui_input" type="number" maxlength="6" placeholder="房费数额" ms-duplex="@dGold" /></div>
    <div class="weui-custom-ft">
      <a ms-on-tap="@DialogHide">取消</a>
      <a ms-on-tap="@tapOK">确定</a>
    </div>
  </div>

</div>
{/block}
{block name="foot"}
<script>
avalon.ready(function () {
  var vm = avalon.define({
    $id: "QunMem",
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    Code:"{$Code??0}", // 当前群号
    RoomCard:"{$RoomCard??0}", // 当前房卡数
    OrderField:"{$OrderField??''}",
    OrderDirection:"{$OrderDirection??''}",
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      var field = this.OrderField;
      var order = this.OrderDirection;
      $.req({
        url: "{:url('qunmem')}",
        data: {
          page: page,
          code: this.Code,
          search: this.search2,
          order: field,
          by: order
        },
        context: this,
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            this.page = resp.data.page * 1;
            this.size = resp.data.size * 1;
            this.total = resp.data.total * 1;
            this.RoomCard = resp.data.RoomCard * 1;
            this.rows.removeAll();
            this.rows.pushArray(resp.data.rows);
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    },
    search2: '',
    tapQuery: function () { // 输入GameID过滤
      this.ajaxPage(1);
      return false;
    },
    bShowDialog:0,
    dGold:'', // 对话框中的变量
    dGameID:'', // 对话框中的变量
    dNickName:'', // 对话框中的变量
    DialogShow: function (GameID) {
      var NickName = '';
      avalon.each(this.rows, function (a, b) {
        if (b.GameID == GameID) {
          NickName = b.NickName;
          return false;
        }
      });
      this.dNickName = NickName;
      this.dGameID = GameID;
      this.dGold = '';
      this.bShowDialog = 1;
    },
    DialogHide: function () {
      this.bShowDialog = 0;
      this.dGameID = 0;
      this.dGold = '';
      this.dNickName = '';
    },
    tapOK: function () {
      if (this.dGold == 0) {
        return;
      }
      $.req({
        url: "{:url('zengold')}",
        data: {
          Code: this.Code,
          GameID: this.dGameID,
          Gold: this.dGold
        },
        context: this,
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno != 0) {
            alert(resp.error);
            return;
          } else {
            this.DialogHide();
            this.ajaxPage(this.page);
          }
        }
      });
    },
    tapHead: function (idx) {
      this.OrderField = String.fromCharCode(65 + idx);
      this.OrderDirection = this.OrderDirection == 'ASC' ? 'DESC' : 'ASC';
      this.ajaxPage(1);
    }
  });
  avalon.scan(document.body);

});
</script>
{/block}